<{php}>
if(isset($config['network_index_seo_title']['cvalue'])){
$title = $config['network_index_seo_title']['cvalue'];
}
if(isset($config['network_index_seo_keywords']['cvalue'])){
$keywords = $config['network_index_seo_keywords']['cvalue'];
}
if(isset($config['network_index_seo_desc']['cvalue'])){
$description = $config['network_index_seo_desc']['cvalue'];
}
<{/php}>

<{include file="../template/public/head.html"}>

<link rel="stylesheet" type="text/css" href="/static/css/li.css" />
<!-- header-->
<!-- pro_top -->
<{include file="../template/public/union_nav.html"}>
<link rel="stylesheet" type="text/css" href="/static/css/css.css?=1" />

<style type="text/css">
    .net-banner{
        background:url(<{if condition="isset($config.service_network_banner.cvalue)"}><{$config.service_network_banner.cvalue}><{/if}>) !important;
        background-size:100% 100% !important;
    }
    @media (max-width: 1200px) {
        .net-banner{
            background: url(<{if condition="isset($config.service_network_banner.cvalue)"}><{$config.service_network_banner.cvalue}><{/if}>) no-repeat center center !important;
        }
    }
    @media (max-width:700px) {
        .net-banner{
            display:none;
        }
    }
</style>

<div class="net-banner banner banner_brands">
    <div class="container">
        <div class="col-sm-7">
            <div class="text">
                <h1><strong><{if condition="isset($config.service_network_title.cvalue)"}><{$config.service_network_title.cvalue}><{/if}></strong></h1>
                <p><{if condition="isset($config.service_network_desc.cvalue)"}><{$config.service_network_desc.cvalue}><{/if}></p>
            </div>
        </div>
    </div>
</div>
<!-- center of the page -->
<div id="content">
    <div class="container mt65 mb65">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="mb30"><strong><{:lang('network_marketing_network')}></strong></h1>
                    <div class="offices-map">
                        <img src="/static/images/networkbg.jpg" width="1110" height="555" alt="" class="img-responsive" />

                    </div>
                    <script type="text/javascript">
                        jQuery(document).ready(function($) {
                            var parentClass = ".offices-map",
                                    pointClass = ".office-info",
                                    $pc = $(parentClass),
                                    $mapImg = $pc.children("img").eq(0)

                            $(pointClass,parentClass).each(function(){

                                var percent = getPercent($(this),$pc),
                                        _this = $(this)


                                $mapImg.load(function(){
                                    initPos(_this,$pc,percent).trigger("resize")
                                })

                                $(window).on("resize",function(){
                                    var pc_w = $pc.width(),
                                            pc_h = $pc.height(),
                                            npl = pc_w*percent.ld,
                                            npt = pc_h*percent.td

                                    _this.css({
                                        "left": npl,
                                        "top": npt
                                    })
                                })


                            })

                            function getPercent($point,$parent) {
                                var parentX = $parent.width(),
                                        parentY = $parent.height(),
                                        initX = $mapImg.attr("width"),
                                        initY = $mapImg.attr("height"),
                                        left = parseInt($point.css("left"), 10),
                                        top = parseInt($point.css("top"), 10),
                                        pld,ptd,
                                        pld = left / initX,
                                        ptd = top / initY

                                return {
                                    ld : pld,
                                    td : ptd
                                }
                            }

                            function initPos($point,$parent,percent) {
                                return $point.css({
                                    "left": $parent.width() * percent.ld,
                                    "top" : $parent.height() * percent.td
                                })
                            }
                        });

                    </script>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <h1 class="mb30"><strong><{:lang('network_domestic')}></strong></h1>
                    <p><{:lang('network_the_overseas_offices')}></p>
                </div>
            </div>
            <hr />

            <{volist name="tips" id="part"}>
            <div class="row">
                <{volist name="part" id="item"}>
                <div class="col-sm-4">
                    <h2><strong><{$item.title}></strong></h2>
                    <div class="list-unstyled">
                        <{$item.content}>
                    </div>
                </div>
                <{/volist}>

            </div>
            <hr />
            <{/volist}>

        </div>
    </div>
</div>
<{include file="../template/public/sidebar.html"}>
<{include file="../template/public/foot.html"}>